<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>在线抽奖</title>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <el-card style="background-color: #f7f7f7">
        <el-form :model="queryForm" ref="queryForm" :inline="true">
            <el-form-item label="抽奖活动" prop="activityId">
                <el-select v-model="queryForm.activityId" placeholder="请选择参与的活动" class="el-input-item"
                           size="small" @change="handleQuery">
                    <el-option
                            v-for="item in activityIdOptions"
                            :key="item.id"
                            :label="item.activityName"
                            :value="parseInt(item.id)"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <div style="height: 100%">
        <el-container>
            <el-container>
                <el-aside width="500px">
                    <el-card>抽奖记录（每个活动仅可参与3次！）</el-card>
                    <el-table
                            :data="myRecord"
                            style="width: 100%;height: 100%"
                            >
                        <el-table-column
                                prop="activityName"
                                label="参与活动">
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                label="抽奖时间">
                        </el-table-column>
                        <el-table-column
                                prop="isAward"
                                label="是否中奖">
                        </el-table-column>
                        <el-table-column
                                prop="awardName"
                                label="奖品名称">
                        </el-table-column>
                    </el-table>
                </el-aside>
                <el-main>
                        <lucky-wheel
                                ref="myLucky"
                                width="600px"
                                height="600px"
                                :prizes="prizes"
                                :blocks="blocks"
                                :buttons="buttons"
                                @start="startCallback"
                                @end="endCallback"
                        />
                </el-main>
            </el-container>
        </el-container>
    </div>
</div>
</body>
    <script th:src="@{/static/js/axios.min.js}"></script>
    <script th:src="@{/static/js/request.js}"></script>
    <script th:src="@{/static/js/common.js}"></script>
    <script th:src="@{/static/api/admin/award.js}"></script>
    <script th:src="@{/static/js/vue.min.js}"></script>
    <script th:src="@{/static/element/index.js}"></script>
    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/layer/layer.js}"></script>
    <script th:src="@{/static/js/vue-composition-api.prod.js}"></script>
    <script th:src="@{/static/js/vue-demi.js}"></script>
    <script th:src="@{/static/js/index.umd.js}"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    myRecord:[],
                    awardList:[],
                    queryForm:{
                        activityId: null,
                    },
                    activityIdOptions: [],
                    blocks: [{ padding: '13px', background: '#6a9f32' }],
                    prizes: [],
                    buttons: [
                        { radius: '30%', background: '#617df2' },
                        {
                            radius: '20%', background: '#1b44c4', pointer: true,
                            fonts: [{ text: '开始\n抽奖', top: '-20px' }]
                    }],
                }
            },
            created() {
                this.findActivityList();
                this.findMyRecord();
            },
            methods: {
                findActivityList(){
                    let param = {
                        "pageNo": 1,
                        "pageSize": 100
                    };
                    requests.post("/admin/activity/pageList", JSON.parse(JSON.stringify(param)))
                        .then((res) => {
                            if (res.code === '200') {
                                this.activityIdOptions = res.data.list;
                            }
                        });
                },
                findMyRecord(){
                    let param = {
                        "activityId": this.queryForm.activityId
                    };
                    requests.post("/admin/award/getMyRecord", JSON.parse(JSON.stringify(param)))
                        .then((res) => {
                            if (res.code === '200') {
                                this.myRecord = res.data;
                                for (let i = 0; i < this.myRecord.length; i++){
                                    this.myRecord[i].isAward = this.myRecord[i].isAward === 1 ? "中奖" : "未中奖";
                                }
                            }
                        });
                },
                handleQuery(){
                    if (!this.queryForm.activityId){
                        this.$message({
                            type: 'warning',
                            message: `请先选择要参与的活动`
                        });
                        return
                    }
                    let param = {
                        "activityId": this.queryForm.activityId
                    };
                    this.findMyRecord();
                    requests.post("/admin/award/list", JSON.parse(JSON.stringify(param)))
                        .then((res) => {
                            if (res.code === '200') {
                                this.awardList = res.data;
                                let bgIndex = 0;
                                let bgColor = ['#6e68e2', '#65b414', '#3787c9', '#37a168'];
                                let prizeList = [];
                                for (let i = 0; i < this.awardList.length; i++){
                                    let awardListElement = this.awardList[i];
                                    prizeList.push({
                                        id: awardListElement.id,
                                        fonts: [{ text: awardListElement.award, top: '10%' }],
                                        background: bgColor[bgIndex],
                                        imgs: [{
                                            src: awardListElement.fileUrl,width:"100px",height:"100px",top: '40%'
                                        }]
                                    })
                                    bgIndex ++;
                                }
                                this.prizes = prizeList;
                            }
                        });
                },
                openAlert(text) {
                    this.$alert(text, '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `确认`
                            });
                        }
                    });
                },
                // 点击抽奖按钮会触发star回调
                startCallback () {
                    if (!this.queryForm.activityId){
                        this.$message({
                            type: 'warning',
                            message: `请先选择要参与的活动`
                        });
                        return
                    }
                    // 调用抽奖组件的play方法开始游戏
                    this.$refs.myLucky.play()
                    // 模拟调用接口异步抽奖
                    setTimeout(() => {
                        let index = -1
                        let param = {
                            "activityId": this.queryForm.activityId,
                        };
                        requests.post("/admin/award/lottery", JSON.parse(JSON.stringify(param)))
                            .then((res) => {
                                if (res.code === '200') {
                                    let award = res.data;
                                    if (award != null){
                                        index = this.prizes.findIndex(obj => obj.id === award.id);
                                    }
                                }
                                this.$refs.myLucky.stop(index);
                            });
                        // 调用stop停止旋转并传递中奖索引
                    }, 5000)
                },
                // 抽奖结束会触发end回调
                endCallback (prize) {
                    this.findMyRecord();
                    console.log("safasfas撒法发撒"+JSON.stringify(prize))
                    if (!prize.fonts){
                        return
                    }
                    let text = prize.fonts[0].text;
                    this.openAlert("恭喜你，中奖了！！！\n奖品为"+text);
                },
            }
        });
    </script>
    <style>
        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            line-height: 30px;
            width: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
            display: flex;
            justify-content: center;/*垂直居中*/
            align-items: center;/*水平居中*/
        }
    </style>
</html>
